* {
  margin: 0;
}
.wrap {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    '. header header'
    '. content .';
  /* grid-template-columns: 1fr repeat(7, 1fr); */
  grid-gap: 4px;
  grid-template-rows: 1fr 1fr 1fr;
}
.one {
  background: lightcoral;
  text-align: center;
  grid-area: header;
}
.two {
  background: lightblue;
  text-align: center;
  grid-area: content;
}
.three {
  background: lightgreen;
  text-align: center;
}
.four {
  background: lightsalmon;
  text-align: center;
}
.five {
  background: lightskyblue;
  text-align: center;
}
